{extend name="base"/}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/goods_attr.css"/>
<style>
	.layui-layer-page .layui-layer-content {overflow: auto!important;}
</style>
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>商品类型用在添加或者编辑商品选择类型然后配置对应的商品属性</li>
			<li>商品配置好对应的类型和属性，前台用户可以根据分类关联的类型在搜索分类商品之后根据属性进行进一步的搜索</li>
			<li>商家可添加自己店铺的类型和属性</li>
		</ul>
	</div>
</div>

<div class="ns-custom-panel ns-form">
	
	<!--商品类型基础信息-->
	<div class="custom-panel-content">
		<ul class="panel-content">
			<li>
				<div>
					<span>类型名称：</span>
					<span>{$attr_class_info['class_name']}</span>
				</div>
				<div>
					<span>排序：</span>
					<span>{$attr_class_info['sort']}</span>
				</div>
			</li>
		</ul>
		
		<a class="panel-operation ns-text-color" href="javascript:editAttrClassPopup();">编辑</a>
		
		<!--编辑商品类型-->
		<script type="text/html" id="editAttrClass">
			
			<div class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label mid"><span class="required">*</span>类型名称：</label>
					<div class="layui-input-inline">
						<input name="class_name" type="text" value="{$attr_class_info['class_name']}" placeholder="请输入类型名称" lay-verify="required" class="layui-input ns-len-mid">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label mid">排序：</label>
					<div class="layui-input-block">
						<input name="sort" type="number" value="{$attr_class_info['sort']}" placeholder="请输入排序" lay-verify="num" class="layui-input ns-len-short">
					</div>
					<div class="ns-word-aux mid">排序值必须为整数</div>
				</div>
				
				<input type="hidden" name="class_id" value="{$attr_class_info['class_id']}">

				<div class="ns-form-row mid">
					<button class="layui-btn ns-bg-color" lay-submit lay-filter="save_attr">保存</button>
				</div>
			</div>
		
		</script>
		
	</div>
	
	<!--关联品牌-->
	<div class="custom-panel-content">
		<ul class="panel-content">
			<li>
				<div>
					<span>关联品牌：</span>
				</div>
			</li>
			<li class="selected-brand-list">
				{foreach name="$attr_class_brand_list" item="vo"}
					{notempty name="$vo['brand_name']"}
					<span data-id="{$vo.id}" data-brand-id="{$vo['brand_id']}">{$vo['brand_name']}</span>
					{/notempty}
				{/foreach}
			</li>
		</ul>
		
		<a class="panel-operation ns-text-color" href="javascript:editBrandPopup();">编辑</a>
		
		<!--编辑关联品牌-->
		<script type="text/html" id="editBrand">
			
			<div class="goods-edit-attr brand-list">
				<h3>已选品牌</h3>
				<ul class="selected">
					{foreach name="$attr_class_brand_list" item="vo"}
						{notempty name="$vo['brand_name']"}
						<li data-brand-id="{$vo['brand_id']}" data-id="{$vo['id']}">
							<span>{$vo['brand_name']}</span>
							<i class="layui-icon layui-icon-delete ns-bg-color"></i>
						</li>
						{/notempty}
					{/foreach}
				</ul>
			</div>
			
			<div id="brand-wrap"></div>
			
			<div id="page"></div>
			
			<form class="layui-form goods-type-edit">
				
				<input type="hidden" name="attr_class_id" value="{$attr_class_info['class_id']}">
				
				<div>
					<button class="layui-btn ns-bg-color" lay-submit lay-filter="save_brand">保存</button>
				</div>
			</form>
			
		</script>
		
		<!--未选品牌-->
		<script type="text/html" id="brandList">
			<div class="goods-edit-attr brand-list">
				<h3>未选品牌</h3>
				<ul class="unselected">
					{{# for(var i=0;i<d.length;i++){ }}
					{{# if(d[i].selected){ }}
					<li data-brand-id="{{ d[i].brand_id }}" class="selected">
						{{# }else{ }}
					<li data-brand-id="{{ d[i].brand_id }}">
						{{# } }}
						<span title="{{ d[i].brand_name }}">{{ d[i].brand_name }}</span>
					</li>
					{{# } }}
				</ul>
			</div>
		</script>
	
	</div>
	
	<!--属性管理-->
	<div class="custom-panel-content attribute">
		
		<!-- 列表 -->
		<table id="attribute_list" lay-filter="attribute_list"></table>
		
		<!-- 操作 -->
		<script type="text/html" id="attributeOperation">
			<div class="ns-table-btn">
				{{# if(d.site_id==0){ }}
				<a class="layui-btn" lay-event="edit">编辑</a>
				<a class="layui-btn" lay-event="delete">删除</a>
				{{# }else{ }}
				<a class="layui-btn" lay-event="change">转入平台</a>
				{{# } }}
			</div>
		</script>
		
		<div class="ns-form-row sm">
			<button class="layui-btn ns-bg-color" onclick="addAttributePopup()">添加属性</button>
		</div>
		
		<!--添加关联属性-->
		<script type="text/html" id="addAttribute">
			
			<form class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label"><span class="required">*</span>属性名称：</label>
					<div class="layui-input-block">
						<input name="attr_name" type="text" placeholder="请输入属性名称" lay-verify="required" class="layui-input ns-len-long" autocomplete="off">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">属性类型：</label>
					<div class="layui-input-block ns-len-mid">
						<select name="attr_type" lay-filter="attr_type">
							<option value="1">单选</option>
							<option value="2">多选</option>
							<option value="3">输入</option>
						</select>
					</div>
					<div class="ns-word-aux">
						<p>注意：属性类型确定后不允许更改，输入不参与筛选</p>
					</div>
				</div>
				
				<div class="layui-form-item js-is-spec">
					<label class="layui-form-label">是否是规格属性：</label>
					<div class="layui-input-block">
						<input type="checkbox" name="is_spec" lay-filter="is_spec" lay-skin="switch" value="1">
					</div>
					<div class="ns-word-aux">
						<p>注意：规格属性不参与筛选，属性类型必须是单选</p>
					</div>
				</div>
				
				<div class="layui-form-item js-is-query">
					<label class="layui-form-label">是否参与筛选：</label>
					<div class="layui-input-block">
						<input type="checkbox" name="is_query" lay-skin="switch" value="1">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">排序：</label>
					<div class="layui-input-block">
						<input name="sort" type="number" value="0" placeholder="请输入排序" lay-verify="num" class="layui-input ns-len-short" autocomplete="off">
					</div>
					<div class="ns-word-aux">
						<p>排序值必须为整数</p>
					</div>
				</div>
				
				<div class="attribute-value-list">
					
					<table class="layui-table">
						<colgroup>
							<col width="50%">
							<col width="25%">
							<col width="25%">
						</colgroup>
						<thead>
						<tr>
							<th>属性值名称</th>
							<th>排序</th>
							<th>操作</th>
						</tr>
						</thead>
					</table>
					
					<div class="table-wrap">
						<table class="layui-table">
							<colgroup>
								<col width="50%">
								<col width="25%">
								<col width="25%">
							</colgroup>
							<tbody></tbody>
						</table>
					</div>
					
					<button class="layui-btn layui-btn-primary" type="button" onclick="addAttrValue()">添加属性值</button>
					
				</div>
				
				<input type="hidden" name="attr_class_id" value="{$attr_class_info['class_id']}">
				<input type="hidden" name="attr_class_name" value="{$attr_class_info['class_name']}">
				
				<div class="ns-form-row">
					<button class="layui-btn ns-bg-color" lay-submit lay-filter="save_add_attribute">保存</button>
				</div>
				
			</form>
		
		</script>
		
		<!--编辑关联属性-->
		<script type="text/html" id="editAttribute">
			
			<form class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label"><span class="required">*</span>属性名称：</label>
					<div class="layui-input-block">
						<input name="attr_name" type="text" value="{{d.attr_name}}" placeholder="请输入属性名称" lay-verify="required" class="layui-input ns-len-long" autocomplete="off">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">属性类型：</label>
					<div class="layui-input-block ns-len-mid">
						<select name="attr_type" lay-filter="attr_type">
							{{# if(d.attr_type == 1){ }}
							<option value="1" disabled selected>单选</option>
							{{# }else if(d.attr_type == 2){ }}
							<option value="2" disabled selected>多选</option>
							{{# }else if(d.attr_type == 3){ }}
							<option value="3" disabled selected>输入</option>
							{{# } }}
						</select>
					</div>
					<div class="ns-word-aux">
						<p>注意：属性类型不可更改，输入不参与筛选</p>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">是否是规格属性：</label>
					<div class="layui-input-block">
						{{# if(d.is_spec == 1){ }}
						<input type="checkbox" name="is_spec" lay-filter="is_spec" lay-skin="switch" value="1" checked>
						{{# }else{ }}
						<input type="checkbox" name="is_spec" lay-filter="is_spec" lay-skin="switch" value="1">
						{{# } }}
					</div>
					<div class="ns-word-aux">
						<p>注意：规格属性不参与筛选</p>
					</div>
				</div>
				
				<div class="layui-form-item js-is-query">
					<label class="layui-form-label">是否参与筛选：</label>
					<div class="layui-input-block">
						{{# if(d.is_query == 1){ }}
						<input type="checkbox" name="is_query" lay-skin="switch" value="1" checked>
						{{# }else{ }}
						<input type="checkbox" name="is_query" lay-skin="switch" value="1">
						{{# } }}
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">排序：</label>
					<div class="layui-input-block">
						<input name="sort" type="number" value="{{d.sort}}" placeholder="请输入排序" lay-verify="num" class="layui-input ns-len-short" autocomplete="off">
					</div>
					<div class="ns-word-aux">
						<p>排序值必须为整数</p>
					</div>
				</div>
				
				{{# if(d.attr_type == 1 || d.attr_type == 2){ }}
				<div class="attribute-value-list">
					
					<table class="layui-table">
						<colgroup>
							<col width="50%">
							<col width="25%">
							<col width="25%">
						</colgroup>
						<thead>
						<tr>
							<th>属性值名称</th>
							<th>排序</th>
							<th>操作</th>
						</tr>
						</thead>
					</table>
					
					<div class="table-wrap">
						<table class="layui-table">
							<colgroup>
								<col width="50%">
								<col width="25%">
								<col width="25%">
							</colgroup>
							<tbody></tbody>
						</table>
					</div>
					
					<button class="layui-btn layui-btn-primary" type="button" onclick="addAttrValue()">添加属性值</button>
				
				</div>
				{{# } }}
				
				<input type="hidden" name="attr_class_id" value="{$attr_class_info['class_id']}">
				<input type="hidden" name="attr_class_name" value="{$attr_class_info['class_name']}">
				<input type="hidden" name="attr_id" value="{{d.attr_id}}">
				
				<div class="ns-form-row">
					<button class="layui-btn ns-bg-color" lay-submit lay-filter="save_edit_attribute">保存</button>
				</div>
			
			</form>
		
		</script>
		
	</div>
</div>

{/block}
{block name="script"}
<script>
	var attr_class_id = "{$attr_class_info['class_id']}";
</script>
<script src="ADMIN_JS/goods_edit_attr.js"></script>
{/block}